<template>
  <div>
    <van-nav-bar title="地图找房" left-arrow @click-left="$router.back()" :fixed="true" />
    <div class="bdmap">
      <baidu-map :center="center" :zoom="zoom" @ready="handler">
        <bm-scale anchor="BMAP_ANCHOR_CENTER_RIGHT"></bm-scale>
        <bm-navigation type="NavigationControlType" anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-navigation>
        <template v-if="flag">
          <template v-if="zoom < 15">
            <bm-label
              v-for="(item, index) in areaList"
              :key="index"
              :content="`<div>${item.label}</div><div>${item.count}套</div>`"
              :position="{
                lng: item.coord.longitude,
                lat: item.coord.latitude,
              }"
              @click="onClick(item)"
              :labelStyle="{
                border: '1px #fff solid',
                color: '#fff',
                fontSize: '14px',
                textAlign: 'center',
                background: '#fff',
                width: '66.9px',
                height: '65px',
                borderRadius: '50%',
                background: '#1cb676',
                lineHeight: '20px',
                padding: '15px 0 0 0',
              }"
            />
          </template>
          <template v-else>
            <bm-label
              v-for="(item, index) in areaList"
              :key="index"
              :content="`<span>${item.label}</span> <span>${item.count}套</span>`"
              :position="{
                lng: item.coord.longitude,
                lat: item.coord.latitude,
              }"
              @click="onClick(item)"
              :labelStyle="{
                border: '1px #fff solid',
                color: '#fff',
                fontSize: '14px',
                textAlign: 'center',
                background: '#fff',
                background: '#1cb676',
                padding: '0 5px ',
              }"
            />
          </template>
        </template>
      </baidu-map>
    </div>
    <van-popup v-model="show" position="bottom" :style="{ height: '50%' }">
      <div class="map_titleWrap__30QeN">
        <h1 class="map_listTitle__3UQFh">房屋列表</h1>
        <a class="map_titleMore__3aiGK" href="#/home/list">更多房源</a>
      </div>
      <ListQQ :list="list"></ListQQ>
    </van-popup>
  </div>
</template>
<script>
import ListQQ from '../components/listqq.vue'
import { getMap, Gethouse } from '../api/map'
export default {
  name: 'BaiDu',
  components: {
    ListQQ
  },
  data () {
    return {
      center: { lng: 0, lat: 0 },
      zoom: 3,
      areaList: [],
      list: [],
      flag: false,
      show: false
    }
  },
  async created () {
    this.$toast.loading({
      message: '加载中...',
      forbidClick: true,
      duration: 0
    })
    let city = ''
    if (city === '') {
      const hot = JSON.parse(localStorage.getItem('hot'))
      city = hot.value
    } else {
      const hot = JSON.parse(localStorage.getItem('hotlist'))
      hot.forEach((item) => {
        city = item.value
      })
    }
    const res = await getMap({ id: city })
    this.areaList = res.body
    this.center.lng = res.body[0].coord.longitude
    this.center.lat = res.body[0].coord.latitude
    // console.log(res.body)
    this.$toast.success({
      message: '加载中成功！',
      duration: 1
    })
    this.flag = true
  },
  methods: {
    handler ({ BMap, map }) {
      console.log(BMap, map)
      this.center.lng = 116.404
      this.center.lat = 39.915
      this.zoom = 11
    },
    async onClick (item) {
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0
      })
      this.center.lng = item.coord.longitude
      this.center.lat = item.coord.latitude
      this.flag = false
      if (this.zoom < 14) {
        this.zoom += 2
        const res = await getMap({ id: item.value })
        this.areaList = res.body
      } else {
        this.show = true
        const res = await Gethouse({ id: item.value })
        this.list = res.body.list
        console.log(res.body)
      }
      this.$toast.success({
        message: '加载成功！',
        duration: 1
      })
      this.flag = true
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .van-nav-bar__content {
  background-color: #21b97a;
  .van-nav-bar__left {
    .van-icon {
      color: #fff;
    }
  }
  .van-nav-bar__title {
    color: #fff;
  }
}
.bdmap > div {
  height: 667px;
}
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 30px;
  background-color: #1cb676;
  color: #fff;
}
.map_titleWrap__30QeN {
    position: relative;
    width: 100%;
    background: #c0c0c2;
    border-top: 1px solid #c8c8c8;
    .map_listTitle__3UQFh, .map_titleMore__3aiGK {
    line-height: 43px;
    color: #1e1e1e;
    font-size: 16px;
    vertical-align: middle;
}
.map_titleMore__3aiGK {
  margin-top: -40px;
    float: right;
    padding-right: 15px;
    font-size: 13px;
}
}
</style>>
